<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>配色方案表</title>
<style type="text/css">
.hsl {
	height:20px;
	border:1px solid #f00;
	padding:10px;
	height:170px;
	background-color:hsl(0, 0%, 90%);
	color:hsl(0, 100%, 50%);
	font-size:12px;
	text-align:center;
	line-height:25px;
	width:320px;
}
ul {
	width:320px;
	margin:0;
	padding:10px 0;
	border-top:1px solid #ccc;
}
li {
	float:left;
	margin:1px 0 0 1px;
	width:50px;
	height:15px;
	list-style:none;
	font-size:12px;
	line-height:15px;
}
/* 第一行 */
li:nth-child(8) {background-color:hsl(0, 100%, 100%);}
li:nth-child(9) {background-color:hsl(0, 75%, 100%);}
li:nth-child(10) {background-color:hsl(0, 50%, 100%);}
li:nth-child(11) {background-color:hsl(0, 25%, 100%);}
li:nth-child(12) {background-color:hsl(0, 0%, 100%);}
/* 第二行 */
li:nth-child(14) {background-color:hsl(0, 100%, 75%);}
li:nth-child(15) {background-color:hsl(0, 75%, 75%);}
li:nth-child(16) {background-color:hsl(0, 50%, 75%);}
li:nth-child(17) {background-color:hsl(0, 25%, 75%);}
li:nth-child(18) {background-color:hsl(0, 0%, 75%);}
/* 第三行 */
li:nth-child(20) {background-color:hsl(0, 100%, 50%);}
li:nth-child(21) {background-color:hsl(0, 75%, 50%);}
li:nth-child(22) {background-color:hsl(0, 50%, 50%);}
li:nth-child(23) {background-color:hsl(0, 25%, 50%);}
li:nth-child(24) {background-color:hsl(0, 0%, 50%);}
/* 第四行 */
li:nth-child(26) {background-color:hsl(0, 100%, 25%);}
li:nth-child(27) {background-color:hsl(0, 75%, 25%);}
li:nth-child(28) {background-color:hsl(0, 50%, 25%);}
li:nth-child(29) {background-color:hsl(0, 25%, 25%);}
li:nth-child(30) {background-color:hsl(0, 0%, 25%);}
/* 第五行 */
li:nth-child(32) {background-color:hsl(0, 100%, 0%);}
li:nth-child(33) {background-color:hsl(0, 75%, 0%);}
li:nth-child(34) {background-color:hsl(0, 50%, 0%);}
li:nth-child(35) {background-color:hsl(0, 25%, 0%);}
li:nth-child(36) {background-color:hsl(0, 0%, 0%);}
</style>
<body>
<div class="hsl">
  <div>色调：0 红色</div>
  <div>竖向：亮度；横向：饱和度</div>
  <ul>
    <li></li>
    <li>100%</li>
    <li>73%</li>
    <li>50%</li>
    <li>25%</li>
    <li>0%</li>
    <li>100%</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>75%</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>50%</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>25%</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>0%</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
</body>
</html>
